import { getAreaConfig, getIndustryConfig, getTagTypeConfig } from '@/utils/filterConfig';
import { getClassType2, getInsuranceTagYear } from './../apis';
import { getTagType, SubjectType } from '@/apis';
import { ComponentType } from 'vc';
import { useRequest } from 'vue-request';
import { transferYearToMultipleSelector } from '@/utils';

export function useScreen() {
  const PAGE_SIZE = 15;

  const queryData = reactive<any>({
    pageNum: 1,
    pageSize: PAGE_SIZE,
    searchTxt: '',
    sortRule: '',
    provinceCode: '',
    cityCode: '',
    countryCode: '',
    industryCategoryCodeLv1: '',
    industryCategoryCodeLv2: '',
    industryCategoryCodeLv3: '',
    tagTypeCode: ''
  });

  // 地区
  const areaData = getAreaConfig();
  areaData.value.submitFn = (val) => {
    const { lv1, lv2, lv3 } = val;

    queryData.provinceCode = lv1.join();
    queryData.cityCode = lv2.join();
    queryData.countryCode = lv3.join();
  };

  // 行业
  const industryData = getIndustryConfig();
  industryData.value.submitFn = (val: any): void => {
    const { lv1, lv2, lv3 } = val;

    queryData.industryCategoryCodeLv1 = lv1?.join() || '';
    queryData.industryCategoryCodeLv2 = lv2?.join() || '';
    queryData.industryCategoryCodeLv3 = lv3?.join() || '';
  };

  // 企业类型
  const tagTypeData = getTagTypeConfig(SubjectType.GREEN_INSURANCE);
  tagTypeData.value.submitFn = (data): void => {
    queryData.tagTypeCode = data;
  };

  // 所属类别
  const { data } = useRequest(getClassType2, {});
  const classTypeData = {
    title: '所属类别',
    component: ComponentType.MULTIPLE,
    options: data,
    submitFn: (data) => {
      queryData.companyType = data;
    }
  };

  // 补贴年度
  function getYear() {
    const { data } = useRequest(getInsuranceTagYear, {
      defaultParams: [{ type: 3 }]
    });
    const options = computed(() => {
      return transferYearToMultipleSelector(data.value || []);
    });

    return computed(() => {
      return {
        title: '补贴年度',
        component: ComponentType.MULTIPLE,
        options,
        submitFn: (data: string) => {
          queryData.statisticalYear = data;
        }
      };
    });
  }
  // 披露日期
  const dateData = {
    title: '披露日期',
    component: ComponentType.DATE,
    type: 'daterange',
    submitFn: (data) => {
      queryData.noticeDateStart = data[0];
      queryData.noticeDateEnd = data[1];
    }
  };

  const screen = ref([areaData.value, industryData.value, tagTypeData.value, classTypeData,getYear().value, dateData]);

  return {
    PAGE_SIZE,
    screen,
    queryData
  };
}
